<template>
  <div class="imgMap" v-if="image">
    <div class="imageContainer">
      <div class="show" ref="show" @mousedown="onMouseDown"
           :style="{width:showSize.width+'px',height:showSize.height+'px',top:showSize.top+'px',left:showSize.left+'px'}"></div>
      <img draggable="false" :src="image" ref="image">
    </div>
  </div>
</template>

<script>
export default {
  name: "auImageMap",
  data(){
    return {
      showSize:{
        width:0,
        height:0,
        top:0,
        left:0
      },
      isKeyDown:false
    }
  },
  props:{
    image:{
      type:String,
      default: null
    },
    size:{
      type:Object,
      default: null
    },
    pageSize:{
      type:Object,
      default: null
    },
  },
  watch:{
    //实际大小width、height
    size:{
      deep:true,
      handler(){
        this.updaterShowSize();
      }
    },
    //容器大小和距离左边定边距离width、height、top、left
    pageSize:{
      deep:true,
      handler(){
        this.updaterShowSize();
      }
    }
  },
  computed:{

  },
  methods:{
    onMouseDown(e){
      this.isKeyDown=true;
      this.$au.MouseSliding(e,null,this.$refs.image,this.size,({left,top,scrollTop,scrollLeft})=>{
        this.showSize.top=top;
        this.showSize.left=left;
        this.$emit("on-point",{x:scrollLeft,y:scrollTop})
      },()=>{
        this.isKeyDown=false;
      })
    },
    updaterShowSize(){
      if(this.isKeyDown)return ;
      let {width,height,top,left}=this.$au.MapSliding(this.size,this.pageSize,this.$refs.image);

      this.showSize.width=width;
      this.showSize.height=height;
      this.showSize.top=top;
      this.showSize.left=left;
      // let size=this.size,pageSize=this.pageSize;
      // if(size.width==0 || size.height==0 ){
      //   return;
      // }
      // let pageSizeWidth=pageSize.width;
      // let pageSizeHeight=pageSize.height;
      // if(pageSizeWidth>size.width){
      //   pageSizeWidth=size.width;
      // }
      // if(pageSizeHeight>size.height){
      //   pageSizeHeight=size.height;
      // }
      // let imageSizeWidth=this.$refs.image.offsetWidth;
      // let imageSizeHeight=this.$refs.image.offsetHeight;
      //
      // this.showSize.width=imageSizeWidth*(pageSizeWidth/size.width);
      // this.showSize.height=imageSizeHeight*(pageSizeHeight/size.height);
      // this.showSize.top=imageSizeWidth/size.width*pageSize.top;
      // this.showSize.left=imageSizeHeight/size.height*pageSize.left;
    },
  },
  mounted() {
    this.$nextTick(()=>{
      this.updaterShowSize();
    })
  },
  created() {

  }
}
</script>

<style scoped lang="scss">
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
$width:230px;
$height:140px;
.imgMap{
  box-shadow: 0 0 10px rgba(80, 80, 80, 0.2);
  width: $width;
  height: $height;
  background: rgba(150, 150, 150, 0.8);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.imageContainer{
  display: inline-block;
  position: relative;
  max-height:$height;
  max-width:$width;
  .show{
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height:40px;
    box-sizing: border-box;
    z-index: 2;
    max-height:$height;
    max-width:$width;
    cursor: move;
    box-shadow: 0 0 0 10000px rgba(238,242,248,.9);
  }
}
img{
  max-height:$height;
  max-width:$width;
}
</style>
